<template>
	<div class="container">
    <el-button type="info" @click="fullScreen">全屏</el-button>
		<div class="welcome" ref="welcome">
			<div class="top">
				<div class="article">
					<div class="article__user">
						<div class="article__user--avatar">
							<el-avatar size="large" :src="userInfo.headimgurl"></el-avatar>
						</div>
						<div class="article__user--info">
							<p class="user--info__nickname">{{ $store.state.userInfo.nickname }}</p>
							<p class="user--info__position">web开发工程师</p>
						</div>
						<div class="article__user--setting">
							<!-- 设置按钮 -->
							<i class="iconfont icon-shezhi" @click="jumpToMine"></i>
						</div>
					</div>
					<div class="article__date">
						<div class="calendar">
							<div class="date-title">日历</div>
							<el-calendar v-model="date" height="100%"> </el-calendar>
						</div>
					</div>
				</div>

				<div class="aside">
					<div class="aside--message">
						<div class="aside--message__left">
							<div class="message--left__hello">hello world</div>
							<div class="message--left__weather">
                {{nanJing.date}}
                {{nanJing.week}}
                <p>天气：{{nanJing.wea}}</p>
                <p>空气质量：{{nanJing.air_level}}</p>
                <p>风向：{{nanJing.win}}</p>
                <p>风速：{{nanJing.win_meter}}</p>
                <p>{{nanJing.air_tips}}</p>
							</div>
						</div>
						<div class="aside--message__notify">通知公告</div>
					</div>
					<div class="aside--tarsk">
						<div class="tarsk--general">
							<h4>任务概况</h4>
							<div class="echartsGeneral" ref="echartsGeneral"></div>
						</div>
						<div class="tarsk--fact">
							<h4>本月工作进度完成情况</h4>
							<ul class="tarsk--detail__list">
								<li v-for="(item, index) in workDataDetail" :key="item.name + index">
									<p>{{ item.value }}</p>
									<p>{{ item.name }}</p>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<!-- 阶段学习情况 -->
			<div class="bottom--achieve">
				<div class="bottom--achieve__left">
					<div class="achieveCharts" ref="achieveCharts"></div>
				</div>
				<!-- 期望课程 -->
				<div class="bottom--achieve__right">
					<div class="expectCharts" ref="expectCharts"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import { mapState } from "vuex";
	import { taskDataApi, lineDataApi, expectDataApi,weatherApi } from "@/api/echarts";
	//1.引入ecahrts
  import * as echarts from 'echarts';
	//2.初始化echarts
	//需要一个dom容器
	//需要一个配置项option
	//特别注意!!!!:容器一定要有高度
	export default {
    meta:{
      title: 'sjtj',
      icon:"iconfont icon-shuju"
    },
		data() {
			return {
				date: new Date(),
				workDataDetail: [],
        nanJing:{}
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
      fullScreen(){
        this.$refs.welcome.style.position = "fixed";
        this.$refs.welcome.style.left = 0;
        this.$refs.welcome.style.top = 0;
        this.$refs.welcome.style.right = 0;
        this.$refs.welcome.style.bottom = 0;
        this.$refs.welcome.style.height = "100%"
      },
			jumpToMine() {
				this.$router.push({path:"mine"});
			},
		},
		mounted() {
			this.$nextTick(function () {
				let option = {
					tooltip: {
						trigger: "item",
						show: true,
					},
					legend: {
						top: "50%",
						left: "right",
						orient: "vertical", //排列方式垂直
					},
					color: ["#2DB5A1", "#EA430C", "#8F85E8"],
					series: [],
				};
				// 任务概览
				let generalCharts = echarts.init(this.$refs.echartsGeneral); //传递一个dom元素
				//传入配置项
				generalCharts.setOption(option);
				//发送异步请求获取数据
				taskDataApi().then((res) => {
					let data = res.data.data;
					this.workDataDetail = data;
					let series = {
						name: "bug修复进度",
						type: "pie",
						center: ["40%", "50%"], //调整饼图在容器中的位置
						radius: ["50%", "80%"], //半径
						avoidLabelOverlap: false,
						label: {
							show: true,
							position: "center", //让数据提示在圆环中间
							formatter: "{d}%",
							textStyle: {
								fontSize: "20",
								fontWeight: "bolder",
							},
						},
						emphasis: {
							//强调 鼠标移入到饼图上会对该数据进行强调
							label: {
								show: true,
								position: "outer",
								fontSize: "15",
								fontWeight: "bold",
								color: "red",
							},
						},
						labelLine: {
							show: true,
						},
						data,
					};
					generalCharts.setOption({
						series,
					});
				});

				//阶段学习情况
				let achieveCharts = echarts.init(this.$refs.achieveCharts);
				//期望课程
				let expectCharts = echarts.init(this.$refs.expectCharts);
				//折线图选项
				let achieveChartsOption = {
					legend: {
						left: "85%",
						top: "bottom",
					},
					xAxis: {
						//x轴
						type: "category",
						data: [],
						show: false,
					},
					yAxis: {
						type: "value",
						show: false, //是否隐藏坐标轴
					},
					label: {
						//提示内容
						show: true,
						formatter: "{b}:{c}%", //格式化内容
					},
					series: [],
				};
				//期望模块饼图选项
				let expectChartsOption = {
					tooltip: {
						show: true,
						trigger: "item", //散点图和饼图的可以使用item触发
					},
					legend: {
						//表示数据的提示
						top: "5%", //距离顶部偏移5%
						left: "80%", //靠左排列的位置
						top: "bottom", //靠顶部排列的位置
						orient: "vertical", //排列方向 horizontal
						itemWidth: 10, //提示框的宽度
						itemHeight: 10, //提示框的高度
						textStyle: {
							//设置字体样式
							// color:"#fff"//颜色
						},
					},
					color: ["#D75A3A", "#CE1908", "#55A49F"], //设置环形图颜色
					series: [
						//系列
					],
				};
				achieveCharts.setOption(achieveChartsOption);
				//折线图异步请求
				lineDataApi().then((res) => {
					let data = res.data.data;
					// console.log(data);
					let xData = [];
					let sData = data.map((item) => {
						xData.push(item.name);
						return item.rate;
					});

					achieveCharts.setOption({
						xAxis: {
							data: xData,
						},
						series: [
							{
								name: "学习进度",
								data: sData,
								type: "line",
								smooth: 1, //是否开启平衡曲线
							},
						],
					});
				});
				expectCharts.setOption(expectChartsOption);
				//底部环形图异步请求
				expectDataApi().then((res) => {
					let data = res.data.data;
					let sData = data.map((item) => {
						return {
							value: item.rate,
							name: item.title,
						};
					});
					expectCharts.setOption({
						series: {
							name: data.desc,
							type: "pie",
							radius: ["40%", "70%"], //半径
							avoidLabelOverlap: true, //重要属性 防止标签重叠
							label: {
								//文字数据提示
								show: true,
								position: "outer", //可以是inner center outer设置提示位置
								formatter: "{b}:{d}%", //\n\n很关键 能够让文字显示在牵引线上方
								// padding: [0, -50]//文字的padding位置
							},
							emphasis: {
								//强调(当鼠标移入的时候显示的强调内容)
								label: {
									show: true,
									fontSize: "10",
									fontWeight: "bold",
								},
							},
							labelLine: {
								//牵引线
								show: true,
								length: 10, //牵引线长度
								length2: 10,
								lineStyle: {
									//牵引线颜色
									color: "#808080",
								},
							},
							data: sData,
						},
					});
				});

        // 天气接口
        weatherApi()
        .then(res =>{
          console.log(res.data.data);
          this.nanJing = res.data.data[0]
        })

				window.onresize = function () {
					generalCharts.resize();
				};
			});
		},
	};
</script>
<style scoped>
.container {
  height:100%;
}
div {
	border-radius: 10px;
}
.date-title {
	height: 30px;
	background: #2aac98;
	color: #fff;
	line-height: 30px;
	font-weight: bolder;
	border-radius: 10px 10px 0 0;
}
.calendar >>> .el-calendar-day {
	height: 100%;
	padding-top: 0;
	padding-bottom: 0;
}
.calendar >>> .el-calendar-table thead th {
	padding-top: 0;
	padding-bottom: 0;
}
.calendar >>> .el-calendar__header {
	padding-top: 5px;
	padding-bottom: 5px;
}
.calendar >>> .el-calendar__body {
	padding-top: 0;
	padding-bottom: 0;
}
.welcome {
	background-image: linear-gradient(135deg, #4c67ff, #5635df);
	margin-top: 5px;
	color: #666;
	display: flex;
	height: 90%;
	flex-direction: column;
	justify-content: space-between;
	/* background: #131925; */
}
.top {
	display: flex;
	flex: 7;
	justify-content: space-around;
	margin-bottom: 5px;
	margin: 5px;
}
.bottom--achieve {
	display: flex;
	flex: 3;
}
.bottom--achieve__left {
	flex: 5;
	margin-right: 10px;
}
.bottom--achieve__right {
	flex: 5;
}
.echartsGeneral {
	width: 80%;
	height: 80%;
	display: flex;
	align-items: center;
}
.achieveCharts {
	height: 100%;
}
.expectCharts {
	height: 100%;
}
.article {
	flex: 3;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-right: 5px;
}
.aside {
	flex: 7;
	display: flex;
	flex-direction: column;
}
.aside--message {
	flex: 5;
	display: flex;
	justify-content: space-around;
	margin-bottom: 5px;
}
.aside--tarsk {
	display: flex;
	justify-content: space-between;
	flex: 5;
	align-items: center;
}
div {
	flex-shrink: 0.6;
}
.tarsk--general {
	/* width: 100%; */
	height: 100%;
	flex: 5;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	align-items: flex-start;
}
.tarsk--general h4 {
	text-align: left;
	padding-left: 5%;
	margin-top: 10px;
}
.tarsk--fact {
	display: flex;
	flex: 5;
	justify-content: space-between;
	flex-direction: column;
}
.tarsk--fact ul {
	margin-top: 15px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.aside--message__left {
	flex: 4;
	display: flex;
	flex-direction: column;
	margin-right: 5px;
}
.aside--message__notify {
	display: flex;
	flex: 6;
	display: flex;
	flex-direction: column;
}
.message--left__hello {
	flex: 5;
	margin-bottom: 5px;
}
.message--left__weather {
	flex: 5;
}
.article__user {
	display: flex;
	flex: 4;
	margin-bottom: 5px;
	justify-content: space-around;
	align-items: center;
}
.article__user--avatar {
	flex: 3;
}
.article__user--info {
	flex: 3;
}
.article__user--setting {
	flex: 1;
	height: 100%;
	position: relative;
}
.article__user--setting i {
	position: absolute;
	top: 5px;
	right: 10px;
}
.article__user--avatar >>> .el-avatar--large {
	width: 80px;
	height: 80px;
}
.article__date {
	height: 100%;
	flex: 6;
}

.article__user,
.article__date,
.message--left__hello,
.message--left__weather,
.aside--tarsk,
.aside--message__notify,
.bottom--achieve {
	/* background: #202835; */
	background: #fff;
	/* border: 1px solid #ccc; */
}
</style>